വിവിധ സ്ക്രീൻ വലുപ്പങ്ങൾക്കും അന്തർദേശീയ ഉള്ളടക്കത്തിനും അനുയോജ്യമായ ഡൈനാമിക്, റെസ്പോൺസീവ് ലേഔട്ടുകൾ നിർമ്മിക്കുന്നതിന് fr, minmax(), auto പോലുള്ള സിഎസ്എസ് ഗ്രിഡ് ട്രാക്ക് ഫംഗ്ഷനുകളുടെ ശക്തി പ്രയോജനപ്പെടുത്തുക.
സിഎസ്എസ് ഗ്രിഡ് ട്രാക്ക് ഫംഗ്‌ഷനുകളിൽ വൈദഗ്ദ്ധ്യം നേടാം: ഗ്ലോബൽ വെബ് ഡിസൈനിനായുള്ള ഡൈനാമിക് ലേഔട്ട് സൈസ് കണക്കുകൂട്ടൽ
സിഎസ്എസ് ഗ്രിഡ് ലേഔട്ട് വെബ് ഡിസൈൻ രംഗത്ത് ഒരു വിപ്ലവം സൃഷ്ടിച്ചിരിക്കുന്നു. സങ്കീർണ്ണവും റെസ്പോൺസീവുമായ ലേഔട്ടുകൾ നിർമ്മിക്കുന്നതിൽ ഇത് സമാനതകളില്ലാത്ത നിയന്ത്രണവും വഴക്കവും നൽകുന്നു. സിഎസ്എസ് ഗ്രിഡിൻ്റെ ശക്തിയുടെ കാതൽ അതിൻ്റെ ട്രാക്ക് ഫംഗ്‌ഷനുകളാണ് – fr, minmax(), auto എന്നിവ. ഗ്രിഡ് റോകൾക്കും കോളങ്ങൾക്കും വേണ്ടി ഡൈനാമിക് ആയതും ബുദ്ധിപരവുമായ വലുപ്പ ക്രമീകരണങ്ങൾ സാധ്യമാക്കാൻ ഇവ സഹായിക്കുന്നു. വ്യത്യസ്ത സ്ക്രീൻ വലുപ്പങ്ങൾ, ഉള്ളടക്കത്തിൻ്റെ അളവ്, അന്താരാഷ്ട്രവൽക്കരണ ആവശ്യകതകൾ എന്നിവയുമായി സുഗമമായി പൊരുത്തപ്പെടുന്ന ലേഔട്ടുകൾ നിർമ്മിക്കുന്നതിന് ഈ ഫംഗ്ഷനുകൾ മനസിലാക്കുകയും ഫലപ്രദമായി ഉപയോഗിക്കുകയും ചെയ്യേണ്ടത് അത്യാവശ്യമാണ്.
സിഎസ്എസ് ഗ്രിഡ് ട്രാക്കുകൾ മനസ്സിലാക്കാം
ഓരോ ട്രാക്ക് ഫംഗ്‌ഷനുകളിലേക്കും കടക്കുന്നതിന് മുമ്പ്, സിഎസ്എസ് ഗ്രിഡ് ട്രാക്ക് യഥാർത്ഥത്തിൽ എന്താണെന്ന് നിർവചിക്കാം. ചുരുക്കത്തിൽ, രണ്ട് ഗ്രിഡ് ലൈനുകൾക്കിടയിലുള്ള സ്ഥലമാണ് ഒരു ട്രാക്ക്. നിങ്ങൾ grid-template-rows അല്ലെങ്കിൽ grid-template-columns എന്നിവ ഉപയോഗിക്കുന്നുണ്ടോ എന്നതിനെ ആശ്രയിച്ച് ഈ ഇടം ഒരു റോയെയോ കോളത്തെയോ പ്രതിനിധീകരിക്കുന്നു. ഈ റോകളുടെയും കോളങ്ങളുടെയും വലുപ്പം നിർണ്ണയിക്കുന്നത് ട്രാക്ക് ഫംഗ്‌ഷനുകളാണ്, ഇത് ഗ്രിഡ് കണ്ടെയ്‌നറിനുള്ളിൽ സ്ഥലം എങ്ങനെ വിതരണം ചെയ്യണമെന്ന് നിർവചിക്കുന്നു.
fr യൂണിറ്റ്: ആനുപാതികമായ സ്ഥല വിഭജനം
സിഎസ്എസ് ഗ്രിഡിൻ്റെ ഡൈനാമിക് സൈസിംഗ് കഴിവുകളുടെ ഒരു അടിസ്ഥാന ശിലയാണ് fr യൂണിറ്റ്. ഗ്രിഡ് കണ്ടെയ്‌നറിനുള്ളിൽ ലഭ്യമായ സ്ഥലത്തിൻ്റെ ഒരു ഭാഗത്തെയാണ് ഇത് പ്രതിനിധീകരിക്കുന്നത്. പിക്സലുകൾ അല്ലെങ്കിൽ em പോലുള്ള നിശ്ചിത യൂണിറ്റുകളിൽ നിന്ന് വ്യത്യസ്തമായി, fr യൂണിറ്റ് ഗ്രിഡ് ട്രാക്കുകൾക്കിടയിൽ ആനുപാതികമായി സ്ഥലം വിതരണം ചെയ്യുന്നു. വ്യൂപോർട്ടിൻ്റെയോ കണ്ടെയ്‌നറിൻ്റെയോ വലുപ്പത്തിനനുസരിച്ച് ഘടകങ്ങളുടെ വലുപ്പം ക്രമീകരിക്കുന്ന ഫ്ലെക്സിബിൾ ലേഔട്ടുകൾ നിർമ്മിക്കാൻ ഇത് അനുയോജ്യമാണ്.
fr എങ്ങനെ പ്രവർത്തിക്കുന്നു
ഗ്രിഡ് കണ്ടെയ്‌നറിൻ്റെ മൊത്തം വലുപ്പത്തിൽ നിന്ന് നിശ്ചിത വലുപ്പത്തിലുള്ള ട്രാക്കുകൾ ഉൾക്കൊള്ളുന്ന സ്ഥലം കുറച്ചാണ് fr യൂണിറ്റ് ലഭ്യമായ സ്ഥലം കണക്കാക്കുന്നത്. ശേഷിക്കുന്ന സ്ഥലം ഓരോ ട്രാക്കിനും നൽകിയിട്ടുള്ള fr മൂല്യങ്ങളെ അടിസ്ഥാനമാക്കി ആനുപാതികമായി വിഭജിക്കുന്നു.
ഉദാഹരണം: ലളിതമായ മൂന്ന് കോളങ്ങളുള്ള ലേഔട്ട്
ലളിതമായ മൂന്ന് കോളങ്ങളുള്ള ഒരു ലേഔട്ട് പരിഗണിക്കുക. ഇതിൽ ആദ്യത്തെ കോളം ലഭ്യമായ സ്ഥലത്തിൻ്റെ പകുതിയും, ശേഷിക്കുന്ന രണ്ട് കോളങ്ങൾ ഓരോന്നും നാലിലൊന്നും എടുക്കണം.
.grid-container {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
}
ഈ ഉദാഹരണത്തിൽ, ആദ്യത്തെ കോളത്തിന് 2fr ഉം മറ്റ് രണ്ട് കോളങ്ങൾക്ക് ഓരോന്നിനും 1fr ഉം നൽകിയിരിക്കുന്നു. ഫ്രാക്ഷനുകളുടെ ആകെ എണ്ണം 4 ആണ് (2 + 1 + 1). അതിനാൽ, ആദ്യത്തെ കോളം ലഭ്യമായ സ്ഥലത്തിൻ്റെ 50% (2/4) ഉം, ശേഷിക്കുന്ന കോളങ്ങൾ ഓരോന്നും 25% (1/4) ഉം എടുക്കും.
fr ഉപയോഗിച്ച് നിശ്ചിത വലുപ്പമുള്ള ട്രാക്കുകൾ കൈകാര്യം ചെയ്യൽ
നിങ്ങൾക്ക് fr യൂണിറ്റുകൾ നിശ്ചിത വലുപ്പമുള്ള ട്രാക്കുകളുമായി സംയോജിപ്പിക്കാനും കഴിയും. നിങ്ങൾക്ക് 200px വീതിയുള്ള ഒരു സൈഡ്‌ബാറും ശേഷിക്കുന്ന സ്ഥലം എടുക്കുന്ന ഒരു പ്രധാന ഉള്ളടക്ക ഏരിയയും വേണമെന്ന് കരുതുക.
.grid-container {
display: grid;
grid-template-columns: 200px 1fr;
}
ഇവിടെ, സൈഡ്‌ബാറിന് എല്ലായ്പ്പോഴും 200px വീതി ഉണ്ടായിരിക്കും, പ്രധാന ഉള്ളടക്ക ഏരിയ ശേഷിക്കുന്ന സ്ഥലം നിറയ്ക്കാൻ വികസിക്കും. ഗ്രിഡ് കണ്ടെയ്‌നറിന് 800px വീതിയുണ്ടെങ്കിൽ, പ്രധാന ഉള്ളടക്ക ഏരിയക്ക് 600px വീതിയുണ്ടാകും (800px - 200px = 600px).
അന്താരാഷ്ട്രവൽക്കരണവും fr-ഉം
വിവിധ ഭാഷകളിൽ ടെക്സ്റ്റിൻ്റെ നീളം ഗണ്യമായി വ്യത്യാസപ്പെടാവുന്ന അന്താരാഷ്ട്രവൽക്കരിച്ച ഉള്ളടക്കം കൈകാര്യം ചെയ്യാൻ fr യൂണിറ്റ് വളരെ ഉപയോഗപ്രദമാണ്. fr ഉപയോഗിക്കുന്നതിലൂടെ, ഡിസൈൻ തകരാതെ തന്നെ നീളമുള്ളതോ ചെറുതോ ആയ ടെക്സ്റ്റ് സ്ട്രിംഗുകൾ ഉൾക്കൊള്ളാൻ നിങ്ങളുടെ ലേഔട്ട് ക്രമീകരിക്കുന്നു എന്ന് ഉറപ്പാക്കാൻ കഴിയും. ഉദാഹരണത്തിന്, ജർമ്മൻ വാക്കുകൾക്ക് ഇംഗ്ലീഷ് വാക്കുകളേക്കാൾ നീളം കൂടുതലാണ്. നിശ്ചിത വീതിയിൽ രൂപകൽപ്പന ചെയ്ത ഒരു ലേഔട്ട് ഇംഗ്ലീഷിൽ മികച്ചതായി കാണപ്പെടുമെങ്കിലും ജർമ്മനിൽ അത് പൂർണ്ണമായും തകരാറിലായേക്കാം. fr ഉപയോഗിക്കുന്നത് ഈ പ്രശ്നം ലഘൂകരിക്കാൻ സഹായിക്കുന്നു.
ഉദാഹരണം: ഫ്ലെക്സിബിൾ നാവിഗേഷൻ മെനു
നിരവധി ഇനങ്ങളുള്ള ഒരു നാവിഗേഷൻ മെനു സങ്കൽപ്പിക്കുക. മെനു അതിൻ്റെ കണ്ടെയ്‌നറിൻ്റെ മുഴുവൻ വീതിയും നിറയ്ക്കണമെന്നും, ഇനങ്ങൾക്കിടയിൽ സ്ഥലം തുല്യമായി വിതരണം ചെയ്യണമെന്നും നിങ്ങൾ ആഗ്രഹിക്കുന്നു.
.nav-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* or auto-fill */
gap: 10px; /* optional gap */
}
ഇത് ഓരോ മെനു ഇനവും അതിൻ്റെ ടെക്സ്റ്റ് ലേബലിൻ്റെ നീളം പരിഗണിക്കാതെ, ലഭ്യമായ സ്ഥലത്തിൻ്റെ തുല്യ ഭാഗം എടുക്കുന്നു എന്ന് ഉറപ്പാക്കുന്നു. minmax(100px, 1fr) ഓരോ ഇനത്തിനും കുറഞ്ഞത് 100px വീതിയുണ്ടെന്നും എന്നാൽ ശേഷിക്കുന്ന സ്ഥലം ആനുപാതികമായി നിറയ്ക്കാൻ വികസിക്കാമെന്നും ഉറപ്പാക്കുന്നു. `auto-fit` കീവേഡ് കണ്ടെയ്‌നറിൻ്റെ വലുപ്പവും ഉള്ളടക്കവും അടിസ്ഥാനമാക്കി കോളങ്ങളുടെ എണ്ണം ക്രമീകരിക്കുന്നു.
minmax() ഫംഗ്ഷൻ: വലുപ്പ പരിധികൾ നിർവചിക്കുന്നു
ഒരു ഗ്രിഡ് ട്രാക്കിനായി ഏറ്റവും കുറഞ്ഞതും കൂടിയതുമായ വലുപ്പം നിർവചിക്കാൻ minmax() ഫംഗ്ഷൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഇത് വ്യത്യസ്ത സാഹചര്യങ്ങളിൽ ട്രാക്കുകൾ എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്നതിൽ കൂടുതൽ നിയന്ത്രണം നൽകുന്നു, അവ വളരെ ചെറുതോ വലുതോ ആകുന്നത് തടയുന്നു. ഇതിൻ്റെ സിൻ്റാക്സ് minmax(min, max) എന്നാണ്, ഇവിടെ min കുറഞ്ഞ വലുപ്പവും max കൂടിയ വലുപ്പവുമാണ്.
minmax()-നുള്ള ഉപയോഗങ്ങൾ
- ഉള്ളടക്കം പുറത്തുപോകുന്നത് തടയുന്നു: ഒരു കോളം അതിൻ്റെ ഉള്ളടക്കത്തിൻ്റെ വീതിയേക്കാൾ ചെറുതാകുന്നില്ലെന്ന് ഉറപ്പാക്കുക, ഇത് ടെക്സ്റ്റ് പുറത്തുപോകുന്നത് തടയുന്നു.
- ദൃശ്യപരമായ സന്തുലിതാവസ്ഥ നിലനിർത്തുന്നു: മറ്റ് കോളങ്ങളുമായി താരതമ്യപ്പെടുത്തുമ്പോൾ ഒരു കോളം ആനുപാതികമല്ലാത്തവിധം വലുതാകുന്നത് തടയാൻ അതിൻ്റെ പരമാവധി വീതി പരിമിതപ്പെടുത്തുക.
- റെസ്പോൺസീവ് ബ്രേക്ക്‌പോയിൻ്റുകൾ സൃഷ്ടിക്കുന്നു: റെസ്പോൺസീവ് ലേഔട്ടുകൾ സൃഷ്ടിക്കാൻ സ്ക്രീൻ വലുപ്പത്തിനനുസരിച്ച്
min,maxമൂല്യങ്ങൾ ക്രമീകരിക്കുക.
ഉദാഹരണം: കുറഞ്ഞ കോളം വീതി ഉറപ്പാക്കുന്നു
നിങ്ങൾക്ക് ചിത്രങ്ങളടങ്ങിയ ഒരു കോളം ഉണ്ടെന്ന് കരുതുക. ചെറിയ സ്ക്രീനുകളിൽ പോലും ചിത്രങ്ങൾ ഉൾക്കൊള്ളാൻ കോളത്തിന് ആവശ്യമായ വീതിയുണ്ടെന്ന് ഉറപ്പാക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നു.
.grid-container {
display: grid;
grid-template-columns: minmax(200px, 1fr) 2fr;
}
ഈ സാഹചര്യത്തിൽ, സ്ക്രീൻ വലുപ്പം പരിഗണിക്കാതെ, ആദ്യത്തെ കോളം ഒരിക്കലും 200px-ൽ താഴെ വീതിയുള്ളതായിരിക്കില്ല. ലഭ്യമായ സ്ഥലം 200px-ൽ കുറവാണെങ്കിൽ, കോളം ഗ്രിഡ് കണ്ടെയ്‌നറിൻ്റെ മുഴുവൻ വീതിയും എടുക്കും, ഇത് രണ്ടാമത്തെ കോളം അടുത്ത റോയിലേക്ക് മാറാൻ കാരണമാകും (grid-auto-flow `row` ആയി സജ്ജീകരിച്ചിട്ടുണ്ടെങ്കിൽ). ലഭ്യമായ സ്ഥലം 200px-ൽ കൂടുതലാണെങ്കിൽ, കോളം ആനുപാതികമായി ലഭ്യമായ സ്ഥലം നിറയ്ക്കാൻ വികസിക്കും (1fr മൂല്യം നിർവചിച്ചിരിക്കുന്ന പരമാവധി വരെ).
minmax()-ഉം fr-ഉം സംയോജിപ്പിക്കുന്നു
ശക്തവും വഴക്കമുള്ളതുമായ ലേഔട്ടുകൾ സൃഷ്ടിക്കുന്നതിന് നിങ്ങൾക്ക് minmax()-ഉം fr-ഉം സംയോജിപ്പിക്കാൻ കഴിയും. നിങ്ങൾക്ക് ഒരു പ്രധാന ഉള്ളടക്ക ഏരിയയും ഒരു സൈഡ്‌ബാറും ആവശ്യമുള്ള ഒരു സാഹചര്യം പരിഗണിക്കുക. സൈഡ്‌ബാറിന് കുറഞ്ഞത് 150px വീതിയുണ്ടായിരിക്കണം, എന്നാൽ ലഭ്യമായ സ്ഥലത്തിൻ്റെ 1fr എടുക്കാൻ വികസിക്കാനും കഴിയണം. പ്രധാന ഉള്ളടക്ക ഏരിയ ശേഷിക്കുന്ന സ്ഥലം എടുക്കണം.
.grid-container {
display: grid;
grid-template-columns: minmax(150px, 1fr) 2fr;
}
ഈ ഉദാഹരണത്തിൽ, സൈഡ്‌ബാർ ഒരിക്കലും 150px-ൽ താഴെ വീതിയുള്ളതായിരിക്കില്ല. ലഭ്യമായ സ്ഥലം പരിമിതമാണെങ്കിൽ, സൈഡ്‌ബാർ 150px എടുക്കും, പ്രധാന ഉള്ളടക്ക ഏരിയ ശേഷിക്കുന്ന സ്ഥലം എടുക്കും. ധാരാളം സ്ഥലമുണ്ടെങ്കിൽ, സൈഡ്‌ബാർ ലഭ്യമായ സ്ഥലത്തിൻ്റെ 1fr എടുക്കാൻ വികസിക്കും, അതേസമയം പ്രധാന ഉള്ളടക്ക ഏരിയ 2fr എടുക്കും.
minmax()-ഉം പ്രവേശനക്ഷമതയും
minmax() ഉപയോഗിക്കുമ്പോൾ, പ്രവേശനക്ഷമത (accessibility) പരിഗണിക്കേണ്ടത് അത്യാവശ്യമാണ്. നിങ്ങളുടെ കുറഞ്ഞ വലുപ്പങ്ങൾ വ്യത്യസ്ത ഭാഷകളിലും വിവിധ ഫോണ്ട് വലുപ്പങ്ങളിലുമുള്ള ഉള്ളടക്കം ഉൾക്കൊള്ളാൻ പര്യാപ്തമാണെന്ന് ഉറപ്പാക്കുക. കാഴ്ച വൈകല്യമുള്ള ഉപയോക്താക്കൾ ഫോണ്ട് വലുപ്പങ്ങൾ വർദ്ധിപ്പിച്ചേക്കാം, ഇത് കുറഞ്ഞ വലുപ്പം വളരെ ചെറുതാണെങ്കിൽ ഉള്ളടക്കം പുറത്തുപോകാൻ കാരണമാകും. വ്യത്യസ്ത ഫോണ്ട് വലുപ്പങ്ങളിലും ഭാഷകളിലും നിങ്ങളുടെ ലേഔട്ടുകൾ പരിശോധിക്കേണ്ടത് അത്യാവശ്യമാണ്.
ഉദാഹരണം: ഫ്ലെക്സിബിൾ ഇമേജ് ഗാലറി
വ്യത്യസ്ത സ്ക്രീൻ വലുപ്പങ്ങളുമായി പൊരുത്തപ്പെടുന്ന ഒരു ഫ്ലെക്സിബിൾ ഇമേജ് ഗാലറി സൃഷ്ടിക്കുക. ദൃശ്യ വ്യക്തത നിലനിർത്താൻ ഓരോ ചിത്രത്തിനും ഒരു മിനിമം വീതി ഉണ്ടായിരിക്കണം, എന്നാൽ ഗാലറി ലഭ്യമായ സ്ഥലം നിറയ്ക്കാൻ വികസിക്കണം.
.gallery-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
}
.gallery-item {
width: 100%;
height: auto;
}
.gallery-item img {
width: 100%;
height: auto;
display: block;
}
repeat(auto-fit, minmax(150px, 1fr)) കുറഞ്ഞത് 150px വീതിയുള്ളതും ലഭ്യമായ സ്ഥലം നിറയ്ക്കാൻ വികസിക്കുന്നതുമായ കോളങ്ങൾ സൃഷ്ടിക്കുന്നു. സ്ക്രീൻ വലുപ്പത്തിനനുസരിച്ച് ഗാലറി കോളങ്ങളുടെ എണ്ണം ഡൈനാമിക് ആയി ക്രമീകരിക്കുന്നു എന്ന് auto-fit കീവേഡ് ഉറപ്പാക്കുന്നു. ഗാലറി ഇനങ്ങൾക്കുള്ളിലെ ചിത്രങ്ങൾ കണ്ടെയ്‌നർ നിറയ്ക്കുന്നതിനായി width: 100% ആയി സജ്ജീകരിച്ചിരിക്കുന്നു.
auto കീവേഡ്: ഉള്ളടക്കത്തിനനുസരിച്ചുള്ള വലുപ്പ നിർണ്ണയം
ഒരു ട്രാക്കിൻ്റെ ഉള്ളടക്കത്തെ അടിസ്ഥാനമാക്കി അതിൻ്റെ വലുപ്പം ക്രമീകരിക്കാൻ auto കീവേഡ് ഗ്രിഡിനോട് നിർദ്ദേശിക്കുന്നു. ഉള്ളടക്കം പുറത്തുപോകാതെ തന്നെ ഉൾക്കൊള്ളുന്നതിനായി ഒരു ട്രാക്ക് കഴിയുന്നത്ര ചെറുതായിരിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുമ്പോൾ ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്.
auto എങ്ങനെ പ്രവർത്തിക്കുന്നു
auto ഉപയോഗിക്കുമ്പോൾ, ഗ്രിഡ് അൽഗോരിതം ട്രാക്കിനുള്ളിലെ ഉള്ളടക്കത്തിൻ്റെ യഥാർത്ഥ വലുപ്പം കണക്കാക്കുന്നു. ഈ വലുപ്പം നിർണ്ണയിക്കുന്നത് ഉള്ളടക്കത്തിൻ്റെ വീതി അല്ലെങ്കിൽ ഉയരം അനുസരിച്ചാണ്, അത് ഒരു കോളമാണോ റോ ആണോ എന്നതിനെ ആശ്രയിച്ചിരിക്കുന്നു. ട്രാക്ക് പിന്നീട് ഉള്ളടക്കം ഉൾക്കൊള്ളാൻ അതിൻ്റെ വലുപ്പം ക്രമീകരിക്കുന്നു.
auto-യുടെ ഉപയോഗങ്ങൾ
- ഉള്ളടക്കത്തെ അടിസ്ഥാനമാക്കിയുള്ള വലുപ്പ നിർണ്ണയം: ഒരു കോളത്തെയോ റോയെയോ അതിൽ അടങ്ങിയിരിക്കുന്ന ഉള്ളടക്കത്തിൻ്റെ അളവ് അനുസരിച്ച് വികസിക്കാനോ ചുരുങ്ങാനോ അനുവദിക്കുക.
- ഫ്ലെക്സിബിൾ സൈഡ്‌ബാറുകൾ സൃഷ്ടിക്കുന്നു: ഒരു സൈഡ്‌ബാറിൻ്റെ ഏറ്റവും വീതിയുള്ള ഘടകത്തിൻ്റെ വീതി അനുസരിച്ച് അതിൻ്റെ വലുപ്പം ക്രമീകരിക്കുക.
- റെസ്പോൺസീവ് ഹെഡറുകളും ഫൂട്ടറുകളും നടപ്പിലാക്കുന്നു: ഒരു ഹെഡറിൻ്റെയോ ഫൂട്ടറിൻ്റെയോ ഉള്ളടക്കത്തിൻ്റെ ഉയരം അനുസരിച്ച് അതിൻ്റെ ഉയരം ക്രമീകരിക്കുക.
ഉദാഹരണം: ഉള്ളടക്കത്തെ അടിസ്ഥാനമാക്കി ഒരു കോളം വലുപ്പം ക്രമീകരിക്കുന്നു
നിങ്ങൾക്ക് ഒരു സൈഡ്‌ബാറും പ്രധാന ഉള്ളടക്ക ഏരിയയുമുള്ള ഒരു ഗ്രിഡ് ഉണ്ടെന്ന് കരുതുക. സൈഡ്‌ബാർ അതിൻ്റെ ഏറ്റവും വീതിയുള്ള ഘടകം ഉൾക്കൊള്ളാൻ പര്യാപ്തമായിരിക്കണം, പക്ഷേ അതിൽ കൂടുതൽ വീതിയുണ്ടാകരുത്. പ്രധാന ഉള്ളടക്ക ഏരിയ ശേഷിക്കുന്ന സ്ഥലം എടുക്കണം.
.grid-container {
display: grid;
grid-template-columns: auto 1fr;
}
ഈ സാഹചര്യത്തിൽ, സൈഡ്‌ബാർ അതിൻ്റെ ഉള്ളടക്കത്തിന് അനുയോജ്യമായ രീതിയിൽ യാന്ത്രികമായി വീതി ക്രമീകരിക്കും. സൈഡ്‌ബാറിലെ ഏറ്റവും വീതിയുള്ള ഘടകം 250px ആണെങ്കിൽ, സൈഡ്‌ബാറിന് 250px വീതിയുണ്ടാകും. പ്രധാന ഉള്ളടക്ക ഏരിയ അപ്പോൾ ശേഷിക്കുന്ന സ്ഥലം എടുക്കും.
auto-യും minmax()-ഉം സംയോജിപ്പിക്കുന്നു
യാന്ത്രികമായി വലുപ്പം ക്രമീകരിക്കുന്ന ഒരു ട്രാക്കിനായി കുറഞ്ഞതും കൂടിയതുമായ വലുപ്പം നിർവചിക്കാൻ നിങ്ങൾക്ക് auto-യും minmax()-ഉം സംയോജിപ്പിക്കാം. ഉദാഹരണത്തിന്, ഒരു കോളത്തിന് കുറഞ്ഞത് 100px വീതി വേണം, എന്നാൽ അതിൻ്റെ ഉള്ളടക്കത്തെ അടിസ്ഥാനമാക്കി പരമാവധി 300px വീതി വരെ യാന്ത്രികമായി വികസിക്കണം.
.grid-container {
display: grid;
grid-template-columns: minmax(100px, auto) 1fr;
}
ഇവിടെ, ആദ്യത്തെ കോളം ഒരിക്കലും 100px-ൽ താഴെ വീതിയുള്ളതായിരിക്കില്ല. കോളത്തിനുള്ളിലെ ഉള്ളടക്കത്തിന് കൂടുതൽ സ്ഥലം ആവശ്യമുണ്ടെങ്കിൽ, കോളം പരമാവധി 300px വരെ വികസിക്കും. അതിനപ്പുറം, കോളത്തിൻ്റെ വീതി 300px-ൽ ഒതുങ്ങും. ശേഷിക്കുന്ന സ്ഥലം 1fr കോളത്തിന് നൽകുന്നു.
auto-യും ഡൈനാമിക് ഉള്ളടക്കവും
ഉള്ളടക്കത്തിൻ്റെ അളവ് ഗണ്യമായി വ്യത്യാസപ്പെടാവുന്ന ഡൈനാമിക് ഉള്ളടക്കം കൈകാര്യം ചെയ്യുമ്പോൾ auto കീവേഡ് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്. ഉദാഹരണത്തിന്, ഒരു ഇ-കൊമേഴ്‌സ് വെബ്സൈറ്റിൽ, ഉൽപ്പന്നങ്ങളുടെ പേരുകളുടെയും വിവരണങ്ങളുടെയും നീളം വ്യത്യാസപ്പെടാം. auto ഉപയോഗിക്കുന്നതിലൂടെ, ഡിസൈൻ തകരാതെ ഈ വ്യതിയാനങ്ങൾ ഉൾക്കൊള്ളാൻ നിങ്ങളുടെ ലേഔട്ട് ക്രമീകരിക്കുന്നു എന്ന് ഉറപ്പാക്കാൻ കഴിയും.
ഉദാഹരണം: ഡൈനാമിക് പ്രൊഡക്റ്റ് ലിസ്റ്റിംഗ്
ഓരോ പ്രൊഡക്റ്റ് കാർഡിൻ്റെയും വീതി ഉൽപ്പന്നത്തിൻ്റെ പേരിൻ്റെ നീളം അനുസരിച്ച് ക്രമീകരിക്കുന്ന ഒരു ഡൈനാമിക് പ്രൊഡക്റ്റ് ലിസ്റ്റിംഗ് സൃഷ്ടിക്കുക.
.product-listing {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, auto));
gap: 10px;
}
.product-card {
border: 1px solid #ccc;
padding: 10px;
}
.product-name {
font-weight: bold;
}
repeat(auto-fit, minmax(150px, auto)) കുറഞ്ഞത് 150px വീതിയുള്ളതും ഉൽപ്പന്നത്തിൻ്റെ പേരിൻ്റെ നീളം അനുസരിച്ച് യാന്ത്രികമായി വികസിക്കുന്നതുമായ കോളങ്ങൾ സൃഷ്ടിക്കുന്നു. സ്ക്രീൻ വലുപ്പവും ഓരോ പ്രൊഡക്റ്റ് കാർഡിലെയും ഉള്ളടക്കവും അടിസ്ഥാനമാക്കി ലിസ്റ്റിംഗ് കോളങ്ങളുടെ എണ്ണം ഡൈനാമിക് ആയി ക്രമീകരിക്കുന്നു എന്ന് auto-fit കീവേഡ് ഉറപ്പാക്കുന്നു.
നൂതന ലേഔട്ടുകൾക്കായി ട്രാക്ക് ഫംഗ്ഷനുകൾ സംയോജിപ്പിക്കുന്നു
സങ്കീർണ്ണവും ഡൈനാമിക് ആയതുമായ ലേഔട്ടുകൾ സൃഷ്ടിക്കുന്നതിനായി സംയോജിപ്പിക്കാനുള്ള കഴിവിൽ ആണ് സിഎസ്എസ് ഗ്രിഡ് ട്രാക്ക് ഫംഗ്ഷനുകളുടെ യഥാർത്ഥ ശക്തി കുടികൊള്ളുന്നത്. fr, minmax(), auto എന്നിവ തന്ത്രപരമായി സംയോജിപ്പിക്കുന്നതിലൂടെ, പരമ്പരാഗത സിഎസ്എസ് ലേഔട്ട് ടെക്നിക്കുകൾക്ക് മുമ്പ് അപ്രാപ്യമായിരുന്ന നിയന്ത്രണവും വഴക്കവും നിങ്ങൾക്ക് കൈവരിക്കാൻ കഴിയും.
ഉദാഹരണം: റെസ്പോൺസീവ് ഡാഷ്‌ബോർഡ് ലേഔട്ട്
നിശ്ചിത വീതിയുള്ള ഒരു സൈഡ്‌ബാർ, ഫ്ലെക്സിബിൾ ആയ പ്രധാന ഉള്ളടക്ക ഏരിയ, ഉള്ളടക്കത്തിനനുസരിച്ച് വലുപ്പം മാറുന്ന ഒരു വലത് സൈഡ്‌ബാർ എന്നിവയുള്ള ഒരു റെസ്പോൺസീവ് ഡാഷ്‌ബോർഡ് ലേഔട്ട് സൃഷ്ടിക്കുക.
.dashboard-container {
display: grid;
grid-template-columns: 200px 1fr auto;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"sidebar main right"
"footer footer footer";
height: 100vh; /* or however you want to handle your layout height */
}
header {
grid-area: header;
background-color: #f0f0f0;
padding: 20px;
}
sidebar {
grid-area: sidebar;
background-color: #e0e0e0;
padding: 20px;
}
main {
grid-area: main;
padding: 20px;
}
right {
grid-area: right;
background-color: #d0d0d0;
padding: 20px;
}
footer {
grid-area: footer;
background-color: #f0f0f0;
padding: 20px;
}
ഈ ഉദാഹരണത്തിൽ, സൈഡ്‌ബാറിന് 200px നിശ്ചിത വീതിയുണ്ട്, പ്രധാന ഉള്ളടക്ക ഏരിയ ശേഷിക്കുന്ന സ്ഥലം (1fr) എടുക്കുന്നു, വലത് സൈഡ്‌ബാർ അതിൻ്റെ ഉള്ളടക്കവുമായി (auto) പൊരുത്തപ്പെടുന്നു. ഹെഡറും ഫൂട്ടറും ഡാഷ്‌ബോർഡിൻ്റെ മുഴുവൻ വീതിയിലും വ്യാപിക്കുന്നു. ഈ ലേഔട്ട് വളരെ റെസ്പോൺസീവ് ആണ്, കൂടാതെ വ്യത്യസ്ത സ്ക്രീൻ വലുപ്പങ്ങൾക്കും ഉള്ളടക്ക വ്യതിയാനങ്ങൾക്കും നന്നായി പൊരുത്തപ്പെടുന്നു. grid-template-areas ലേബൽ ചെയ്ത ഗ്രിഡ് ഏരിയകൾ നൽകുന്നു, ഇത് കോഡിൻ്റെ വായനാക്ഷമതയും പരിപാലനവും മെച്ചപ്പെടുത്തുന്നു.
സിഎസ്എസ് ഗ്രിഡ് ട്രാക്ക് ഫംഗ്ഷനുകൾ ഉപയോഗിക്കുന്നതിനുള്ള മികച്ച രീതികൾ
- നിങ്ങളുടെ ലേഔട്ട് ആസൂത്രണം ചെയ്യുക: കോഡ് എഴുതുന്നതിന് മുമ്പ്, നിങ്ങളുടെ ലേഔട്ട് ശ്രദ്ധാപൂർവ്വം ആസൂത്രണം ചെയ്യുകയും ഫ്ലെക്സിബിൾ ആകേണ്ടതും നിശ്ചിതമാകേണ്ടതുമായ ഏരിയകൾ തിരിച്ചറിയുകയും ചെയ്യുക.
- ശരിയായ യൂണിറ്റുകൾ തിരഞ്ഞെടുക്കുക: ഓരോ ട്രാക്കിൻ്റെയും പ്രത്യേക ആവശ്യകതകൾ അടിസ്ഥാനമാക്കി ഉചിതമായ യൂണിറ്റുകൾ (
fr,px,em,auto) തിരഞ്ഞെടുക്കുക. minmax()വിവേകത്തോടെ ഉപയോഗിക്കുക: വലുപ്പ പരിധികൾ നിർവചിക്കുന്നതിനും ഉള്ളടക്കം പുറത്തുപോകുന്നത് തടയുന്നതിനുംminmax()ഉപയോഗിക്കുക.- സമഗ്രമായി പരിശോധിക്കുക: നിങ്ങളുടെ ലേഔട്ടുകൾ റെസ്പോൺസീവും പ്രവേശനക്ഷമവുമാണെന്ന് ഉറപ്പാക്കാൻ വ്യത്യസ്ത സ്ക്രീൻ വലുപ്പങ്ങളിലും വ്യത്യസ്ത ഉള്ളടക്ക അളവുകളിലും പരിശോധിക്കുക.
- അന്താരാഷ്ട്രവൽക്കരണം പരിഗണിക്കുക: നിങ്ങളുടെ ലേഔട്ടുകൾ രൂപകൽപ്പന ചെയ്യുമ്പോൾ വിവിധ ഭാഷകളിലെ ടെക്സ്റ്റ് നീളത്തിലെ വ്യതിയാനങ്ങൾ കണക്കിലെടുക്കുക.
- പ്രവേശനക്ഷമതയ്ക്ക് മുൻഗണന നൽകുക: സിഎസ്എസ് ഗ്രിഡ് ഉപയോഗിക്കുമ്പോൾ എല്ലായ്പ്പോഴും പ്രവേശനക്ഷമത പരിഗണിക്കുക. നിങ്ങളുടെ ലേഔട്ടുകൾ വൈകല്യമുള്ള ആളുകൾക്ക് ഉപയോഗിക്കാൻ കഴിയുന്നതാണെന്ന് ഉറപ്പാക്കുക.
ക്രോസ്-ബ്രൗസർ അനുയോജ്യത
സിഎസ്എസ് ഗ്രിഡിന് മികച്ച ക്രോസ്-ബ്രൗസർ അനുയോജ്യതയുണ്ട്, എല്ലാ പ്രധാന ആധുനിക ബ്രൗസറുകളിലും ഇതിന് പിന്തുണയുണ്ട്. എന്നിരുന്നാലും, നിങ്ങളുടെ ലേഔട്ടുകൾ ശരിയായി റെൻഡർ ചെയ്യുന്നുണ്ടോയെന്ന് ഉറപ്പാക്കാൻ വ്യത്യസ്ത ബ്രൗസറുകളിൽ പരിശോധിക്കുന്നത് എല്ലായ്പ്പോഴും നല്ലതാണ്. പഴയ ബ്രൗസറുകൾക്കായി നിങ്ങൾക്ക് വെണ്ടർ പ്രിഫിക്സുകൾ (ഉദാഹരണത്തിന്, ഇൻ്റർനെറ്റ് എക്സ്പ്ലോററിനായി -ms-) ഉപയോഗിക്കേണ്ടി വന്നേക്കാം, എന്നാൽ ഇത് ഇപ്പോൾ വളരെ അപൂർവമാണ്.
ഉപസംഹാരം
വെബിനായി ഡൈനാമിക്, റെസ്പോൺസീവ് ലേഔട്ടുകൾ സൃഷ്ടിക്കുന്നതിനുള്ള ശക്തവും വഴക്കമുള്ളതുമായ ഒരു മാർഗ്ഗം സിഎസ്എസ് ഗ്രിഡ് ട്രാക്ക് ഫംഗ്ഷനുകൾ നൽകുന്നു. fr യൂണിറ്റ്, minmax() ഫംഗ്ഷൻ, auto കീവേഡ് എന്നിവയിൽ വൈദഗ്ദ്ധ്യം നേടുന്നതിലൂടെ, വ്യത്യസ്ത സ്ക്രീൻ വലുപ്പങ്ങൾ, ഉള്ളടക്ക അളവുകൾ, അന്താരാഷ്ട്രവൽക്കരണ ആവശ്യകതകൾ എന്നിവയുമായി സുഗമമായി പൊരുത്തപ്പെടുന്ന ലേഔട്ടുകൾ നിങ്ങൾക്ക് നിർമ്മിക്കാൻ കഴിയും. ഈ ടെക്നിക്കുകൾ സ്വീകരിക്കുകയും നിങ്ങളുടെ വെബ് ഡിസൈൻ പ്രോജക്റ്റുകൾക്കായി സിഎസ്എസ് ഗ്രിഡിൻ്റെ പൂർണ്ണ സാധ്യതകൾ പ്രയോജനപ്പെടുത്തുകയും ചെയ്യുക. ആഗോള പ്രേക്ഷകർക്ക് വേണ്ടി എല്ലാവരെയും ഉൾക്കൊള്ളുന്നതും ഉപയോക്തൃ-സൗഹൃദവുമായ അനുഭവങ്ങൾ സൃഷ്ടിക്കുന്നതിന് നിങ്ങളുടെ ലേഔട്ടുകൾ സമഗ്രമായി പരിശോധിക്കാനും വികസന പ്രക്രിയയിലുടനീളം പ്രവേശനക്ഷമത പരിഗണിക്കാനും ഓർമ്മിക്കുക.